<template>
  <div class="breadCrumb">
    <div  v-show="!dealEv">
      <i class="icon
         el-icon-arrow-left"></i>
      <span class="first">{{first}}</span>
      /
      <span class="second">{{second}}</span>
    </div>
    <div v-show="dealEv">
      <i class="icon el-icon-arrow-left back"
         @click="back"></i>
      <span class="first back"
            @click="back">{{first}}</span>
      /
      <span class="second">{{second}}</span>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
      }
    },
    methods: {
      back () {
        this.$emit('back')
      }
    },
    props: {
      first: {
        type: String,
        default: '设置'
      },
      second: {
        type: String,
        default: '设置'
      },
      dealEv: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .breadCrumb
    height 30px
    line-height 30px
    padding 3px 10px
    border-bottom 1px solid $c-border1
    .icon
      color $c-main
      display inline-block
      width 18px
      height 18px
      line-height 18px
      border 1px solid $c-main
      border-radius 50%
      text-align center
    .el-icon-arrow-left
      font-size 12px
    .first
      margin 0 3px 0 10px
      color $cf-gray4
    .back
      cursor pointer
    .back:hover
      color $c-main
    .second
      margin-left 3px
      font-weight bold
</style>
